const instance = require('../../utils/request')
const app = getApp()



let chart = null;

function initChart(canvas, width, height,F2) { // 使用 F2 绘制图表
  
  chart = new F2.Chart({
    el: canvas,
    width,
    height
  });
  
  chart.source([]);
  chart.tooltip({
    showItemMarker: false,
    onShow(ev) {
      const { items } = ev;
      items[0].name = null;
      items[0].name = items[0].title;
      items[0].value = items[0].value + '°';
    }
  });
  chart.line().position('fxTime*temp');
  chart.render();
  return chart;
}

Page({

  /**
   * 页面的初始数据
   */
  data: {
    opts: {
      onInit: initChart
    },

    province: '北京', //省
    area: '北京', //地区
    day: instance.getTime(), //时间
    location: {
      lng: '116.397128',
      lat: '39.916527'
    }, //区域经纬度
    daily: [], //七天天气信息
    info_24: [], //24小时天气信息
    todayInfo: {}, //当天气温信息

  },

  //获取定位信息
  getCityInfo() {
      instance.getPosition({ //获取定位信息
        keyword: '中心',
        success: ({
          data
        }) => {
          this.setData({
            province: data[0].ad_info.province, //保存省份信息
            area: data[0].ad_info.city, //市级信息
            day: instance.getTime(), //时间
            location: {
              lng: data[0].location.lng,
              lat: data[0].location.lat
            }
          })

        },
        complete: res => {
          this.getNowWeather()
          this.getDayWeather()
          this.getWeekWeather()
        }
      })
  },

  //查询实时天气
  getNowWeather() {
    instance.getData({ //请求获取当前时间段天气信息
      url: 'https://devapi.qweather.com/v7/weather/now',
      data: {
        key: app.globalData.weatherKey,
        location: this.data.location.lng + ',' + this.data.location.lat
      },
      success: ({
        data
      }) => {
        this.setData({
          todayInfo: data.now
        })
      }
    })
  },
  //查询24小时天气
  getDayWeather() {
    //获取24小时天气
    instance.getData({
      url: 'https://devapi.qweather.com/v7/weather/24h',
      data: {
        key: app.globalData.weatherKey,
        location: this.data.location.lng + ',' + this.data.location.lat
      },
      success: ({
        data: {
          hourly
        }
      }) => {
        const newData = []
        for(let i of hourly) {
          let obj = {
            fxTime: i.fxTime.slice(11, 16),
            temp: parseInt(i.temp)
          }
          i.fxTime = i.fxTime.slice(11, 16)
          i.temp = parseInt(i.temp)
          newData.push(obj)
        }
        chart.source(newData,{
          temp: {
            tickCount: 5,
            min: 0,
          },
          fxTime: {
            tickCount:4
          }
        });
        chart.axis('fxTime', {
          // label: {
          //   textAlign: 'middle',
          //   textBaseline: 'middle'
          // }
          label: function (text) {
            return {
              lineHeight:'50rpx',
              textAlign: 'center'
            }
          }
        });
        chart.changeData(hourly)
        this.setData({
          info_24: hourly
        })
      }
    })
  },
  //查询一周天气
  getWeekWeather() {
    instance.getData({ //获取七天的天气
      url: 'https://devapi.qweather.com/v7/weather/7d',
      data: {
        key: app.globalData.weatherKey,
        location: this.data.location.lng + ',' + this.data.location.lat
      },
      success: ({ //解构data
        data
      }) => {
        // data.daily.map(el => { //日期格式化
        //   // console.log(el);
        //   // el.iconDay = `../images/weatherIcons/'${el.iconDay}'.png`
        //   el.fxDate = el.fxDate.slice(5).replace('-', '/')
        //   el.fxDate = el.fxDate.charAt(0) == 0 ? el.fxDate.slice(1) : el.fxDate
        //   return el
        // })
        for(let i of data.daily) {
          i.fxDate = i.fxDate.slice(5).replace('-', '/')
          i.fxDate = i.fxDate.charAt(0) == 0 ? i.fxDate.slice(1) : i.fxDate
        }
        this.setData({
          daily: data.daily
        })
      }
    })
  },

  //挑战进搜索页面
  goSearch() {
    wx.navigateTo({
      url: '../search/search',
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    if(Object.keys(options).length != 0) {
      this.setData({
        location: JSON.parse(options.location),
        province: options.province,
        area: options.city
      })
      this.getNowWeather()
      this.getDayWeather()
      this.getWeekWeather()
    }else{
      this.getCityInfo()
    }
    
     
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    this.getNowWeather()
    this.getDayWeather()
    this.getWeekWeather()
    wx.stopPullDownRefresh();
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})